<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <text class="nav-icon">←</text>
      </view>
      <text class="nav-title">设计方案</text>
      <view class="nav-right">
        <text class="share-icon" @click="shareDesign">分享</text>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view class="main-content" scroll-y>
      <!-- 原始照片展示 -->
      <view class="photo-section">
        <image :src="photoUrl" mode="aspectFit" class="room-photo" />
        <view class="photo-overlay">
          <text class="photo-tag">生成的照片</text>
        </view>
      </view>

      <!-- 房间分析结果 -->
      <view class="analysis-section">
        <view class="section-title">
          <text class="title-text">空间分析</text>
          <text class="subtitle-text">AI智能识别结果</text>
        </view>
        
        <view class="analysis-grid">
          <view class="analysis-item" v-for="(item, index) in analysisResults" :key="index">
            <image :src="item.icon" mode="aspectFit" class="item-icon" />
            <view class="item-content">
              <text class="item-title">{{item.title}}</text>
              <text class="item-value">{{item.value}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 设计建议 -->
      <view class="suggestions-section">
        <view class="section-title">
          <text class="title-text">设计建议</text>
          <text class="subtitle-text">基于空间特点的专业建议</text>
        </view>

        <view class="suggestion-list">
          <view class="suggestion-item" v-for="(item, index) in designSuggestions" :key="index">
            <view class="suggestion-header">
              <image :src="item.icon" mode="aspectFit" class="suggestion-icon" />
              <text class="suggestion-title">{{item.title}}</text>
            </view>
            <text class="suggestion-desc">{{item.description}}</text>
          </view>
        </view>
      </view>

      <!-- 推荐家具 -->
<!--      <view class="furniture-section">
        <view class="section-title">
          <text class="title-text">推荐家具</text>
          <text class="subtitle-text">适合您空间的家具推荐</text>
        </view>

        <scroll-view class="furniture-scroll" scroll-x show-scrollbar="false">
          <view class="furniture-item" v-for="(item, index) in recommendedFurniture" :key="index">
            <image :src="item.image" mode="aspectFill" class="furniture-image" />
            <view class="furniture-info">
              <text class="furniture-name">{{item.name}}</text>
              <text class="furniture-price">{{item.price}}</text>
            </view>
          </view>
        </scroll-view>
      </view> -->
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <button class="action-btn save-btn" @click="saveDesign">
        <text class="btn-icon">💾</text>
        <text>保存方案</text>
      </button>
      <button class="action-btn contact-btn" @click="contactDesigner">
        <text class="btn-icon">💬</text>
        <text>添加设计师微信</text>
      </button>
    </view>

    <!-- 设计师微信二维码弹窗 -->
    <view class="qrcode-modal" v-if="showQrcode">
      <view class="qrcode-content">
        <view class="avatar-section">
          <image class="avatar" src="/static/images/avatar.png" mode="aspectFill" />
          <text class="greeting">Hi! 我是您的专属顾问</text>
        </view>
        <image class="qrcode-image" src="/static/images/designer-qrcode.jpg" mode="aspectFit" show-menu-by-longpress />
        <text class="qrcode-tip">长按识别二维码 ▶▶▶</text>
        <text class="service-text">添加顾问微信为您提供专属服务</text>
        <view class="service-grid">
          <view class="service-item">
            <image class="service-icon" src="/static/images/icons/measure.png" mode="aspectFit" />
            <text class="service-name">确定尺寸</text>
          </view>
          <view class="service-item">
            <image class="service-icon" src="/static/images/icons/design.png" mode="aspectFit" />
            <text class="service-name">制作装帧</text>
          </view>
          <view class="service-item">
            <image class="service-icon" src="/static/images/icons/delivery.png" mode="aspectFit" />
            <text class="service-name">邮寄到家</text>
          </view>
        </view>
        <button class="close-btn" @click="closeQrcode">关闭</button>
      </view>
      <view class="modal-mask" @click="closeQrcode"></view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 获取页面参数
const photoUrl = ref('')

// 分析结果数据
const analysisResults = ref([
  { 
    title: '房间类型',
    value: '客厅',
    icon: '/static/images/icons/room-type.png'
  },
  {
    title: '空间面积',
    value: '约 20㎡',
    icon: '/static/images/icons/area.png'
  },
  {
    title: '采光情况',
    value: '良好',
    icon: '/static/images/icons/light.png'
  },
  {
    title: '墙面状况',
    value: '适合装饰',
    icon: '/static/images/icons/wall.png'
  }
])

// 设计建议数据
const designSuggestions = ref([
  {
    title: '色彩搭配',
    description: '主色：暖白（墙面）+ 浅木色（家具·点缀色：焦糖色（沙发/抱枕）+ 灰调（窗帘/地毯）；技巧：保持70%中性色 + 20%主色 + 10%亮色',
    icon: '/static/images/icons/color.png'
  },
  {
    title: '家具布局',
    description: '沙发：靠墙放，两侧留50cm放边几·电视：距离沙发3-4米，电视柜高度60cm·动线：通道宽度≥80cm，避免遮挡',
    icon: '/static/images/icons/layout.png'
  },
  {
    title: '照明设计',
    description: '主灯：吸顶灯（3000K暖光）；辅助光：落地灯（沙发旁）+ 灯带（电视墙后）;比例：基础光30% + 功能光50% + 氛围光20%',
    icon: '/static/images/icons/lighting.png'
  }
])

// 推荐家具数据
const recommendedFurniture = ref([
  {
    name: '北欧简约沙发',
    price: '¥2999',
    image: '/static/images/furniture/sofa.jpg'
  },
  {
    name: '实木电视柜',
    price: '¥1599',
    image: '/static/images/furniture/tv-stand.jpg'
  },
  {
    name: '现代落地灯',
    price: '¥399',
    image: '/static/images/furniture/floor-lamp.jpg'
  },
  {
    name: '装饰画组合',
    price: '¥599',
    image: '/static/images/furniture/art.jpg'
  }
])

// 二维码显示状态
const showQrcode = ref(false)

// 页面加载
onMounted(() => {
  // 从缓存中获取生成的设计图片
  const generatedDesign = uni.getStorageSync('generatedDesign')
  if (generatedDesign) {
    photoUrl.value = generatedDesign
  }
})

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 分享设计
const shareDesign = () => {
  uni.showActionSheet({
    itemList: ['分享给好友', '保存图片'],
    success: (res) => {
      if (res.tapIndex === 0) {
        // 分享给好友
        uni.showToast({
          title: '分享功能开发中',
          icon: 'none'
        })
      } else {
        // 保存图片
        uni.saveImageToPhotosAlbum({
          filePath: photoUrl.value,
          success: () => {
            uni.showToast({
              title: '保存成功',
              icon: 'success'
            })
          }
        })
      }
    }
  })
}

// 保存设计方案
const saveDesign = () => {
  uni.showToast({
    title: '方案已保存',
    icon: 'success'
  })
}

// 咨询设计师
const contactDesigner = () => {
  showQrcode.value = true
}

// 关闭二维码
const closeQrcode = () => {
  showQrcode.value = false
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background: #fff;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

  .nav-left, .nav-right {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-icon {
    font-size: 44rpx;
    color: #333;
  }

  .nav-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }

  .share-icon {
    font-size: 28rpx;
    color: #07c160;
  }
}

.main-content {
  flex: 1;
  overflow: hidden;
}

.photo-section {
  position: relative;
  width: 100%;
  height: 500rpx;
  background: #000;

  .room-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .photo-overlay {
    position: absolute;
    left: 32rpx;
    bottom: 32rpx;
    
    .photo-tag {
      display: inline-block;
      padding: 8rpx 24rpx;
      background: rgba(0, 0, 0, 0.6);
      color: #fff;
      font-size: 24rpx;
      border-radius: 24rpx;
    }
  }
}

.section-title {
  padding: 32rpx;
  
  .title-text {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 8rpx;
  }
  
  .subtitle-text {
    font-size: 24rpx;
    color: #999;
  }
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  padding: 0 32rpx 32rpx;

  .analysis-item {
    background: #fff;
    border-radius: 20rpx;
    padding: 24rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

    .item-icon {
      width: 64rpx;
      height: 64rpx;
      margin-right: 16rpx;
    }

    .item-content {
      flex: 1;

      .item-title {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 4rpx;
        display: block;
      }

      .item-value {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
  }
}

.suggestions-section {
  margin-top: 24rpx;
  background: #fff;
  padding-bottom: 32rpx;

  .suggestion-list {
    padding: 0 32rpx;

    .suggestion-item {
      margin-bottom: 32rpx;

      .suggestion-header {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .suggestion-icon {
          width: 48rpx;
          height: 48rpx;
          margin-right: 16rpx;
        }

        .suggestion-title {
          font-size: 32rpx;
          font-weight: 500;
          color: #333;
        }
      }

      .suggestion-desc {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
    }
  }
}

.furniture-section {
  margin-top: 24rpx;
  background: #fff;
  padding-bottom: 32rpx;

  .furniture-scroll {
    white-space: nowrap;
    padding: 0 32rpx;

    .furniture-item {
      display: inline-block;
      width: 280rpx;
      margin-right: 24rpx;
      border-radius: 16rpx;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

      .furniture-image {
        width: 100%;
        height: 280rpx;
        background: #f5f5f5;
      }

      .furniture-info {
        padding: 16rpx;

        .furniture-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 8rpx;
          display: block;
        }

        .furniture-price {
          font-size: 24rpx;
          color: #07c160;
          font-weight: 500;
        }
      }
    }
  }
}

.bottom-bar {
  padding: 24rpx 32rpx;
  background: #fff;
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 24rpx;

  .action-btn {
    flex: 1;
    height: 88rpx;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;

    .btn-icon {
      font-size: 36rpx;
      margin-right: 8rpx;
    }
  }

  .save-btn {
    background: #f5f5f5;
    color: #333;
  }

  .contact-btn {
    background: #07c160;
    color: #fff;
    
    .btn-icon {
      font-size: 32rpx;
    }
  }
}

.qrcode-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;

  .qrcode-content {
    width: 600rpx;
    background: #fff;
    border-radius: 24rpx;
    padding: 48rpx 40rpx;
    position: relative;
    z-index: 1;
    text-align: center;
  }

  .avatar-section {
    margin-bottom: 40rpx;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      margin-bottom: 20rpx;
      background: #f0f0f0;
    }
    
    .greeting {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }
  }

  .qrcode-image {
    width: 400rpx;
    height: 400rpx;
    margin: 0 auto 16rpx;
  }

  .qrcode-tip {
    font-size: 28rpx;
    color: #666;
    display: block;
    margin-bottom: 40rpx;
  }

  .service-text {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 40rpx;
    display: block;
  }

  .service-grid {
    display: flex;
    justify-content: space-around;
    margin-bottom: 48rpx;

    .service-item {
      text-align: center;
      
      .service-icon {
        width: 64rpx;
        height: 64rpx;
        margin-bottom: 12rpx;
      }
      
      .service-name {
        font-size: 24rpx;
        color: #333;
      }
    }
  }

  .close-btn {
    width: 100%;
    height: 88rpx;
    background: #f5f5f5;
    color: #333;
    font-size: 32rpx;
    border-radius: 44rpx;
    
    &:active {
      opacity: 0.8;
    }
  }

  .modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.96);
  }
}
</style> 